<template>
  <div style="background-color: #f5f5f5" class="pa-15">
    <div class="disFlxJS linh-30 pb-5">
      <div class="fw-7">合作模式设置</div>
      <div class="color6">
        <el-popover placement="top-start" trigger="hover">
          <div>
            <div>交易费用说明：</div>
            <div>1. 当为统一定价返佣时，交易服务费 =订单金额* 交易服务费率</div>
            <div>2. 当为采购价结算时，交易服务费=采购金额 *交易服务费率</div>
          </div>
          <span
            class="colorZS iconfont el-icon-question fz-18"
            slot="reference"
          ></span>
        </el-popover>
        交易服务费由你承担
      </div>
    </div>
    <div>
      <div>
        <div>
          <el-radio v-model="tcmChannelCooperate.cooperateType" :label="1"
            >统一定价返佣</el-radio
          >
          <template v-if="tcmChannelCooperate.cooperateType === 1">
            <span class="pl-36 pr-10">设置渠道推广佣金</span>
            <el-input-number
              v-model="tcmChannelCooperate.commissionRatio"
              :step="1"
              :min="0"
              :max="100"
              size="mini"
              step-strictly
            ></el-input-number>
            <span class="pl-2">%</span>
          </template>
        </div>
        <div class="fz-12 color9 pt-5 pl-25">
          你设置项目佣金比例后，合作机构卖出产品服务后，你的收益 = 售价 - 佣金
          ，合作机构获得相应的佣金
        </div>
      </div>

      <div class="mt-20">
        <div>
          <el-radio v-model="tcmChannelCooperate.cooperateType" :label="2"
            >采购价结算</el-radio
          >
          <template v-if="tcmChannelCooperate.cooperateType === 2">
            <span class="pl-50 pr-10">设置渠道推广佣金</span>
            <el-input-number
              v-model="tcmChannelCooperate.commissionRatio"
              :step="1"
              :min="0"
              :max="100"
              size="mini"
              step-strictly
            ></el-input-number>
            <span class="pl-2">%</span>
          </template>
        </div>
        <div class="fz-12 color9 pt-5 pl-25">
          你设置商品采购价后，合作渠道自由设置售价，卖出产品服务后，你的收益 =
          采购金额 - 推广佣金，合作渠道收益 = 佣金
        </div>
        <template v-if="tcmChannelCooperate.cooperateType === 2">
          <div class="disFlx mt-20 ml-30" style="align-items: flex-end">
            <div class="pr-20">设置控价：</div>
            <el-radio v-model="tcmChannelCooperate.priceControl" :label="0"
              >不控价</el-radio
            >
            <el-radio v-model="tcmChannelCooperate.priceControl" :label="1"
              >控价</el-radio
            >
          </div>
          <div v-if="tcmChannelCooperate.priceControl === 1" class="ml-30 mt-10">
            <div>
              <span class="pr-5">最终售价下限：采购价 × (1 +</span>
              <el-input-number
                v-model="tcmChannelCooperate.priceControlLower"
                :step="1"
                :min="0"
                size="mini"
                :controls="false"
                step-strictly
                style="width: 60px"
                :disabled="tcmChannelCooperate.cooperateType !== 2"
              ></el-input-number>
              <span class="pl-2">% )</span>
            </div>
            <div class="mt-5">
              <span class="pr-5">最终售价上限：采购价 × (1 +</span>
              <el-input-number
                v-model="tcmChannelCooperate.priceControlUpper"
                :step="1"
                :min="tcmChannelCooperate.priceControlLower"
                size="mini"
                :controls="false"
                step-strictly
                style="width: 60px"
                :disabled="tcmChannelCooperate.cooperateType !== 2"
              ></el-input-number>
              <span class="pl-2">% )</span>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tcmChannelCooperate: {
        cooperateType: 1, // 合作模式: 0无 1统一定价返佣 2采购价结算
        commissionRatio: 0, // 佣金比例
        priceControl: 1, // 控价设置: 0不控价 1控价  统一定价返佣默认设置为控价
        priceControlLower: 0, // 控价下限
        priceControlUpper: 0, // 控价上限
      },
    };
  }
};
</script>

<style lang="scss" scoped></style>
